<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
	<style>
		.conter{
			width: 600px;
			margin: 150px auto 0;
		}
		.inputkey{
			width: 430px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="conter">
			<el-form :inline="true" :model="form" class="demo-form-inline">
			  <el-form-item label="关键字">
			    <el-autocomplete v-model="form.valuekey" :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect" placeholder="请输入关键字" class="inputkey"></el-autocomplete>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">搜索</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data(){
				return {
					timeout: null,
					form: {
			        	valuekey: '',
						restaurants: [],
			        }
      			}
			},
			methods:{
				loadAll(data) {
					let serier = [];
					if (data) {
						for(var i = 0, length1 = data.length; i < length1; i++){
							let a = data[i];
							let b = '';
							if (typeof a === "object") {
								b = a[1];
								a = a[0];
							}
							serier.push({ "value": a, "address": b});
						}
					}else{
						serier.push({ "value": "~暂无数据~"});
					}
					return serier;
			    },
				querySearch(queryString, cb) {
					var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
					var restaurants = this.form.restaurants;
					this.$http.jsonp(url,{
						params: {
							wd: queryString
						},
                    	jsonp:'cb'
					}).then((response)=>{
						restaurants = this.loadAll(response.data.s);
						this.form.restaurants = restaurants;
						if(restaurants.length > 0){
							var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
						
					        clearTimeout(this.timeout);
					        this.timeout = setTimeout(() => {
					        	cb(results);
					        }, 500 * Math.random());
						}
					});
			    },
			    createStateFilter(queryString) {
			        return (state) => {
			        	return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			        };
			    },
				handleSelect(){
					this.onSubmit();
				},
				onSubmit() {
			        console.log(this.form.valuekey);
			    }
			},
			mounted: function(){
				this.form.restaurants = this.loadAll();
			},
		});
	</script>
</body>
</html>